<template>
  <nut-wrapper>
    <view class="theme-container">
      <!-- 主题模式切换 -->
      <view class="section">
        <view class="section-title">
          <i
            class="iconfont icon-pifuzhuti-xianxing"
            style="font-size: 20px"
          ></i>
          <text>主题模式</text>
        </view>
        <view class="theme-mode">
          <view
            class="mode-item"
            :class="{ active: currentMode === 'light' }"
            @tap="switchMode('light')"
          >
            <i class="iconfont icon-taiyang" style="font-size: 32px"></i>
            <text>浅色模式</text>
          </view>
          <view
            class="mode-item"
            :class="{ active: currentMode === 'dark' }"
            @tap="switchMode('dark')"
          >
            <i class="iconfont icon-yejing" style="font-size: 32px"></i>
            <text>深色模式</text>
          </view>
          <view
            class="mode-item"
            :class="{ active: currentMode === 'system' }"
            @tap="switchMode('system')"
          >
            <i class="iconfont icon-xitong" style="font-size: 32px"></i>
            <text>跟随系统</text>
          </view>
        </view>
      </view>

      <!-- 主题色选择 -->
      <view class="section">
        <view class="section-title">
          <i class="iconfont icon-color" style="font-size: 20px"></i>
          <text>主题色</text>
        </view>
        <view class="color-list">
          <view
            class="color-item"
            v-for="color in themeColors"
            :key="color.value"
            :class="{ active: currentColor === color.value }"
            :style="{ backgroundColor: color.value }"
            @tap="switchColor(color)"
          >
            <i
              v-if="currentColor === color.value"
              class="iconfont icon-xuanzhong"
              style="font-size: 24px; color: #fff"
            ></i>
          </view>
        </view>
      </view>

      <!-- 字体大小调节 -->
      <view class="section">
        <view class="section-title">
          <i class="iconfont icon-ziti" style="font-size: 20px"></i>
          <text>字体大小</text>
        </view>
        <view class="font-size-control">
          <text class="size-label">A</text>
          <nut-range
            v-model="fontSize"
            :max="20"
            :min="12"
            :step="1"
            @change="changeFontSize"
          />
          <text class="size-label large">A</text>
        </view>
        <view class="preview-text">
          <text :style="{ fontSize: fontSize + 'px' }">这是预览文本</text>
        </view>
      </view>

      <!-- 界面动画 -->
      <view class="section">
        <view class="section-title">
          <i class="iconfont icon-bim_donghua" style="font-size: 20px"></i>
          <text>界面动画</text>
        </view>
        <nut-cell>
          <nut-switch v-model="enableAnimation" @change="toggleAnimation" />
        </nut-cell>
      </view>

      <!-- 恢复默认设置 -->
      <view class="reset-section">
        <nut-button type="danger" block @tap="resetSettings"
          >恢复默认设置</nut-button
        >
      </view>
    </view>
  </nut-wrapper>
</template>

<script>
import Taro from "@tarojs/taro";
import { useThemeStore } from "@/stores/themeStore";

export default {
  name: "Theme",
  setup() {
    const themeStore = useThemeStore();
    return {
      themeStore,
    };
  },
  data() {
    return {
      currentMode: "light",
      currentColor: "#007aff",
      fontSize: 14,
      enableAnimation: true,
      themeColors: [
        { name: "蓝色", value: "#007aff", user: "userA" },
        { name: "绿色", value: "#4cd964", user: "userB" },
        { name: "紫色", value: "#5856d6" },
        { name: "橙色", value: "#ff9500" },
        { name: "红色", value: "#ff3b30" },
        { name: "粉色", value: "#ff2d55" },
      ],
    };
  },
  mounted() {
    const themeStore = useThemeStore();
    // 初始化主题设置
    this.currentMode = themeStore.themeMode;
    this.currentColor = themeStore.currentTheme.primaryColor;
    this.fontSize = themeStore.fontSize;
    this.enableAnimation = themeStore.enableAnimation;
  },
  methods: {
    switchMode(mode) {
      this.currentMode = mode;
      this.themeStore.setThemeMode(mode);
      Taro.showToast({
        title: "主题模式已切换",
        icon: "success",
      });
      this.refresh();
    },
    refresh() {
      Taro.navigateBack({
        delta: 0,
      });
    },
    switchColor(color) {
      this.currentColor = color.value;
      this.themeStore.setTheme(color.value);

      Taro.showToast({
        title: "主题色已更改",
        icon: "success",
      });
      this.refresh();
    },
    changeFontSize(value) {
      this.fontSize = value;
      this.themeStore.setFontSize(value);
    },
    toggleAnimation(value) {
      this.enableAnimation = value;
      this.themeStore.setAnimation(value);

      Taro.showToast({
        title: value ? "已开启动画" : "已关闭动画",
        icon: "success",
      });
    },
    resetSettings() {
      Taro.showModal({
        title: "提示",
        content: "确定要恢复默认设置吗？",
        success: (res) => {
          if (res.confirm) {
            this.themeStore.resetToDefault();

            // 更新本地状态
            this.currentMode = this.themeStore.themeMode;
            this.currentColor = this.themeStore.currentTheme.primaryColor;
            this.fontSize = this.themeStore.fontSize;
            this.enableAnimation = this.themeStore.enableAnimation;

            Taro.showToast({
              title: "已恢复默认设置",
              icon: "success",
            });
            this.refresh();
          }
        },
      });
    },
  },
};
</script>

<style lang="scss">
.theme-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 40rpx;

  .section {
    margin: 30rpx;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

    .section-title {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #333;

      i {
        margin-right: 10rpx;
        color: $primary-color;
      }
    }
  }

  .theme-mode {
    display: flex;
    justify-content: space-around;
    padding: 20rpx 0;

    .mode-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20rpx;
      border-radius: 12rpx;
      transition: all 0.3s;

      i {
        margin-bottom: 10rpx;
        color: #666;
      }

      text {
        font-size: 26rpx;
        color: #666;
      }

      &.active {
        background-color: #f0f9ff;

        i,
        text {
          color: $primary-color;
        }
      }
    }
  }

  .color-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    padding: 20rpx 0;

    .color-item {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.2s;

      &.active {
        transform: scale(1.1);
      }
    }
  }

  .font-size-control {
    display: flex;
    align-items: center;
    padding: 30rpx 0;

    .size-label {
      font-size: 28rpx;
      color: #666;
      margin: 0 20rpx;

      &.large {
        font-size: 36rpx;
      }
    }

    :deep(.nut-range) {
      flex: 1;
    }
  }

  .preview-text {
    padding: 30rpx;
    background-color: #f8f8f8;
    border-radius: 8rpx;
    text-align: center;
  }

  .reset-section {
    margin: 60rpx 30rpx;
  }
}

// 深色模式样式
[data-theme="dark"] {
  .theme-container {
    background-color: #1c1c1e;

    .section {
      background-color: #2c2c2e;
      box-shadow: none;

      .section-title {
        color: #fff;
      }
    }

    .theme-mode {
      .mode-item {
        i,
        text {
          color: #8e8e93;
        }

        &.active {
          background-color: #3a3a3c;

          i,
          text {
            color: $primary-color;
          }
        }
      }
    }

    .preview-text {
      background-color: #3a3a3c;
      color: #fff;
    }
  }
}
</style>
